import React, { Component } from "react";
import PubSub from "pubsub-js";
import styled from "styled-components";

class SearchArea extends Component {
  search = () => {
    const keywords = this.input.value.trim();
    if (keywords) {
      //发布消息
      PubSub.publish("search", keywords);
    }
  };
  render() {
    return (
      // <Container width="100%">
      <Container>
        <div className="input-group bg-primary">
          <h2>请输入关键字进行搜索</h2>
          <input
            type="text"
            className="form-control"
            required="required"
            ref={(input) => (this.input = input)}
          />
          <button
            type="button"
            className="btn btn-default"
            onClick={this.search}
          >
            Search!
          </button>
        </div>
      </Container>
    );
  }
}
const Container = styled.div`
  /* width: ${(props) => props.width}; */
  height: 20%;
  div {
    padding: 0px 10%;
    width: 100%;
    height: 100%;
    padding-top: 2%;
    border-radius: 10px;
  }
  input {
    width: 35% !important;
  }
`;
export default SearchArea;
